<template>
    <el-dialog v-model="showDialog" :close-on-click-modal="false" title="上传发票" width="600">
        <div class="flex items-center mg-b-20">
            <div class="label flex-shrink-0">发票来源：</div>
            <el-select v-model="invoiceFrom" placeholder="请选择">
                <el-option  v-for="(i, index) in invoiceFromOption" :key="i.value" :label="i.label" :value="i.value" />
            </el-select>
        </div>
        <el-upload ref="uploadRef" class="upload-demo" accept=".zip" :auto-upload="false" drag
            :before-upload="moreinvoicerlistbeforeUploadfp" :on-error="handleUploadError" :file-list="moreinvoicefileList"
            :on-change="moreinvoicelistonChange" :headers="{ Authorization: 'BackstageBearer ' + token }"
            :before-remove="moreinvoicelistbeforeRemove" :action="baseurl + '/saas/invoice/upload-zip-new'" :limit="1"
            :multiple="false">
            <img src="../../../assets/image/uploadvideo.png" alt="" />
            <div class="el-upload__text">
                将文件拖到此处，或<span class="fc-primary">点击上传</span>
            </div>
            <div class="fc-red">
                批量上传电子签发票文件名格式：电子签__年-月.zip；如：电子签__2022-01.zip
            </div>
            <div class="fc-red">
                批量上传日日保发票文件名格式：日日保__年-月.zip；如：日日保__2022-01.zip
            </div>
        </el-upload>
        <div class="flexendbox">
            <el-button class="my_cancelbtn" @click="handleCancel">取消</el-button>
            <el-button class="my_btn" @click="handleConfirm">确定</el-button>
        </div>
    </el-dialog>
    <DialogRedo v-model:show="showRedo" :list="errorList" @success="handleSuccess"/>

</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import baseurl from '../../../api/env'
import DialogRedo from './DialogRedo.vue'
import { uploadZipNew } from '@/api/approval/upload.ts'

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    }
})

const emits = defineEmits(['update:show', 'refresh'])

const showDialog = ref(false)
const uploadRef = ref(null)



const moreinvoicefileList = ref([])

const token = ref('')

const moreinvoicerlistbeforeUploadfp = (ev) => {
    console.log(111, ev)
}

const handleUploadError = (file) => {
    console.log(file)
}

const moreinvoicelistonChange = (file, fileListVal) => {
    moreinvoicefileList.value = fileListVal
}

const moreinvoicelistbeforeRemove = (file, fileListVal) => {
    moreinvoicefileList.value = fileListVal
}

const showRedo = ref(false)

const handleCancel = () => {
    moreinvoicefileList.value = []
    showDialog.value = false
}

const errorList = ref([])

const handleConfirm = () => {
    // uploadRef.value.submit();
    // uploadRef.value.clearFiles();
    // showRedo.value = true
    if (moreinvoicefileList.value?.length) {
        const name = moreinvoicefileList.value[0].name
        if(!/^(日日保|长期保|电子签)__\d{4}-\d{2}\.zip$/.test(name)) {
            ElMessage.error('请按正确的格式上传')
            return
        }
        const formData = new FormData()
        formData.append('file', moreinvoicefileList.value[0].raw)
        formData.append('invoiceFrom', invoiceFrom.value)

        uploadZipNew(formData).then(res => {
            if (res?.length) {
                errorList.value = res 
                showRedo.value = true
            } else {
                ElMessage.success('上传成功')
            }
            emits('refresh')
            handleCancel()
        })

    }

}

const handleSuccess = (res) => {
    emits('refresh')
}

const invoiceFrom = ref(1)

const invoiceFromOption = ref([
    {
        label: '自开票',
        value: 1
    },
    {
        label: '保司票',
        value: 2
    },
])


onMounted(() => {
    token.value = sessionStorage.getItem('token')
})

watch(() => props.show, (newval) => {
    showDialog.value = newval
})

watch(showDialog, (newval) => {
    emits('update:show', newval)
})
</script>

<style lang="scss" scoped></style>